<template>
  <div class='container' style="padding: 20px;">
    <el-card>
      <el-form inline :model="form" ref="form" class="form">
        <el-form-item prop="keyword" label-width="80px" label="关键字">
          <el-input v-model="form.keyword" @keyup.enter.native="search"/>
        </el-form-item>
        <div style="float: right;">
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-form>
      <el-alert
        style="margin-bottom:20px;"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <el-table
        v-loading.fullscreen.lock='loading'
        :data="datalist"
        style="width:100%;margin-bottom:20px;">
        <el-table-column label="编号" prop="id"/>
        <el-table-column label="题型">
          <template #default='{row}'>
            {{type(row.questionType)}}
          </template>
        </el-table-column>
        <el-table-column label="题目编号">
          <template #default="{row}">
           <el-link @click="lookitem(item.id)" type="primary" v-for="item in row.questionIDs" :key="item">{{item.number}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template #default="{row}">{{row.addTime}}</template>
        </el-table-column>
        <el-table-column label="答题时间(s)" width="300px" prop="totalSeconds"/>
        <el-table-column label="正确率(%)" prop="accuracyRate"/>
        <el-table-column label="录入人" prop="userName"/>
        <el-table-column label="操作" width='80px'>
          <template #default='{row}'>
            <el-button type="danger" plain icon="el-icon-delete" circle @click="deleteitem($event,row.id)" />
          </template>
        </el-table-column>
      </el-table>
       <div style="float: right;margin-bottom:20px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[5,10,15,20]"
          :page-size="pages.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <Mydialog ref='Mydialog'></Mydialog>
  </div>
</template>

<script>
import Mydialog from './components/Mydialog'
import { questionType, difficulty } from '@/api/hmmm/constants'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  name: 'questions',
  components: {
    Mydialog
  },
  created () {
    this.changeform = JSON.parse(JSON.stringify(this.form))
    this.getlist()
  },
  data () {
    return {
      total: 0,
      datalist: [],
      form: {
        keyword: '' // 关键字
      },
      changeform: {},
      firstclick: false,
      pages: {
        page: 1, // 当前页数
        pagesize: 20 // 页展示
      },
      cataloglist: [],
      tagslist: [],
      userlist: [],
      loading:false
    }
  },
  methods: {
    async getlist () { // 获取列表
      this.loading=true
      let obj = {}
      if (this.firstclick) {
        obj = { ...this.form }
      } else {
        obj = { ...this.changeform }
      }
      const { data } = await randoms({ ...this.pages, keyword: obj.keyword })
      this.total = data.counts
      this.datalist = data.items
      this.loading=false
    },
    handleSizeChange (value) { // 条数
      this.pages.pagesize = value
      this.getlist()
    },
    handleCurrentChange (value) { // 页数
      this.pages.page = value
      this.getlist()
      this.$forceUpdate()
    },
    search () { // 查找
        this.pages.page = 1
        this.firstclick = true
        this.getlist()
        this.firstclick = false
    },
    resetForm () { // 重置
      this.$refs.form.resetFields()
      this.pages.page = 1
      this.firstclick = true
      this.getlist()
      this.firstclick = false
    },
    type (num) { // 问题类型
      const obj = questionType.find(v => v.value === +num)
      if (!obj) return
      return obj.label
    },
    level (num) { // 难度等级
      const obj = difficulty.find(v => v.value === +num)
      if (!obj) return
      return obj.label
    },
    async lookitem (id) { // 对话框
      const { Mydialog } = this.$refs
      Mydialog.dialogVisible = true
      await Mydialog.getinfo({ id })
      Mydialog.type()
    },
    async deleteitem (e, id) { // 删除
      e.target.nodeName === 'BUTTON' ? e.target.blur() : e.target.parentNode.blur()
      const boo = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (!boo) return this.$message.info('取消成功')
      const { data: { success } } = await removeRandoms({ id })
      success && this.$message.success('删除成功')
      this.datalist.length === 1 && this.pages.pagesize === 1 && (this.pages.page--)
      this.getlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.form{
  ::v-deep .el-input{
    width: 320px ;
  }
}
::v-deep .is-leaf.el-table__cell{
  background-color: #fafafa;
  border-bottom: 1px solid #eeeeee;
}
</style>
